<template>
  <div class="box1">
    <div class="up">
      <div class="up-left">
        <div class="l-top">
          <div class="top-one">
            <div class="title">
              工单统计
              <span>2023.03.01 ~ 2023.03.14</span>
            </div>
            <div class="main">
              <div class="status">
                <div class="num">58</div>
                <div class="text">工单总数（个）</div>
              </div>
              <div class="status">
                <div class="num">2</div>
                <div class="text">完成工单（个）</div>
              </div>
              <div class="status">
                <div class="num">0</div>
                <div class="text">进行工单（个）</div>
              </div>
              <div class="status">
                <div class="num">51</div>
                <div class="text">取消工单（个）</div>
              </div>
            </div>
          </div>
          <div class="top-two">
            <div class="title">
                销售统计
            <span>2023.03.01 ~ 2023.03.14</span>
            </div>
             <div class="main">
              <div class="status">
                <div class="num">7290</div>
                <div class="text">订单量（个）</div>
              </div>
              <div class="status">
                <div class="num">4.87</div>
                <div class="text">销售额（万元）</div>
              </div>
            </div>
          </div>
          
        </div>
        <div class="l-footer">
            <div class="f">
                <div class="title">
                销售数据
                <span>2023.03.01 ~ 2023.03.14</span>
            </div>
            <div class="year">
                年月日
            </div>
            </div>
            <!-- echarts图标 左边 -->
            <div id="main" style="width: 600px;height:400px;">

            </div>
            <!-- echarts图标 右边 -->


        </div>
      </div>
      <div class="up-right">商品热榜</div>
    </div>
    <div class="below">
      <!-- 底部左边 -->
      <div class="b-left">底部左边</div>
      <div class="b-right">底部右边</div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "DikedeIndex",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less">
.box1 {
  max-width: 1200px;
  height: 100%;
  background-color: #d0d0d0;
//   padding: 20px;
//   margin-left: 60px;
}
// 上面
.up {
//   width: 1305px;
  display: flex;
  height: 538px;
  padding: 20px;
  // 上半部分左边
  .up-left {
    width: 973px;
    // padding: 0 10px;
    //  padding-left: 10px;
    // padding-right: 10px;
    // margin-left:10px ;
    .l-top {
      display: flex;
      height: 166px;
    //   padding: 0 10px;
      
      //  工单统计
      .top-one {
        height: 126px;
        width: 483px;
        padding: 20px;
        background-color: #e9f3ff;
        border-radius: 20px;
        text-align: left;
        justify-content: space-between;
       
        .main {
          display: flex;
          .status {
            width: 105px;
            height: 100px;
            text-align: center;
            padding-top: 10px;
            padding:10px;

            .num {
              height: 50px;
              font-size: 36px;

              line-height: 50px;
              color: #072074;
            }
            .text {
              font-size: 12px;
            }
          }
        }
      }
      //  销售统计
      .top-two {
        width: 395px;
        height: 126px;
        padding: 20px;
        background-color: #fbefe8;
        border-radius: 20px;
        margin: 0 10px;
        text-align: left;

        .main{
        display: flex;
        .status{
            width: 162px;
            // height: 107px;
            // line-height: 50px;
            text-align: center;
            padding: 10px;
             .num {
              height: 50px;
              font-size: 36px;

              line-height: 50px;
              color: #072074;
            }
            .text {
              font-size: 12px;
            }
        }
        }
      }
    }
    // 销售数据
    .l-footer {
        
      height: 312px;
      width: 933px;
      padding: 20px;
      margin-top: 20px;
      //  padding: 0 10px;
      background-color: darkkhaki;
      text-align: left;
      .f{
        display: flex;
        .title{
        width: 795px;
        height: 34px;
        .year{
            width: 129px;
        }
      }
      }
      
    }
  }
  // 商品热榜
  .up-right {
    width: 274px;
    padding: 20px;
    background-color: rgb(134, 171, 157);
  }
}

// 底部

.below {
  height: 353px;
  margin-top: 20px;
  background-color: tan;
  display: flex;
  .b-left {
    height: 100%;
    width: 753px;
    padding: 0 10px;
  }
  .b-right {
    height: 100%;
    width: 533px;
    padding: 0 10px;
  }
}
</style>
